<template>
  <div>
    <!--    顶部-->
    <div style="height: 60px;background-color: cornflowerblue">

    </div>
    <!--    主体部分-->
    <div style="display: flex">
      <!--     左侧菜单项-->
      <div style="width: 200px;border-right: 1px solid #dddddd;min-height: calc(100vh - 60px)">
        <el-menu router :default-active="router.currentRoute.value.path" style="border: 0">
          <el-menu-item index="/">
            <el-icon>
              <House/>
            </el-icon>
            首页
          </el-menu-item>
          <el-menu-item index="/manager/data">
            <el-icon><DataLine/></el-icon>
            数据统计
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item>管理员信息</el-menu-item>
            <el-menu-item>普通用户信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!--      右侧主体区域-->
      <div style="flex: 1;width: 0;background-color: azure;padding: 50px">
        <RouterView/>
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import {DataLine, User} from "@element-plus/icons-vue";
</script>

<style scoped>

</style>